import React from 'react';
import './town.scss';
import { api } from 'js/api/api';
import { userData } from 'js/core/userData';
import { browserHistory } from 'react-router';
import { panelPop } from 'views/modal/panelPop/panelPop';
import PetMarket from './component/petMarket';
import PropMarket from './component/propMarket';
import Pub from 'views/modal/pub/pub';
import Alchemy from './component/alchemy/alchemy';
import Smithy from './component/smithy/smithy';

class Main extends React.Component {
    constructor() {
        super()
    }
    changeMap = (mapType, mapName) => {
        api('changeMap', { mapType: mapType }, (err, data) => {
            if (data && data.log) {
                window.eventHandle.emit('log', data.log);
            }
            this.setState({})
            browserHistory.push(mapName)
        })
    }
    showPet = () => {
        panelPop.show(<PetMarket />);
    }
    showPropMarket = () => {
        panelPop.show(<PropMarket />);
    }
    showPub = () => {
        panelPop.showMainBody(<Pub />);
    }
    showBag = () => {
        panelPop.showMain('bag');
    }
    showRiskBag = () => {
        panelPop.showMain('riskBag');
    }
    showAlchemy = () => {
        panelPop.showMainBody(<Alchemy />);
    }
    showSmithy = () => {
        panelPop.showMainBody(<Smithy />);
    }
    render() {
        let player = window.player;
        let riskBag = player.riskBag;
        return (
            <div id="town">
                <div className="building flex-col-hcenter">
                    <div className="flex-vcenter shop" onClick={this.showPub}>
                        <div className="icon flex-center"><div className="fonts-pub"></div></div>
                        <div className="flex-g-1">酒馆</div>
                        <div className="flex-col-2 flex-center">
                            <div className="arrow"></div>
                        </div>
                    </div>
                    <div className="flex-vcenter shop" onClick={this.showPropMarket}>
                        <div className="icon flex-center"><div className="fonts-shop"></div></div>
                        <div className="flex-g-1">杂物铺</div>
                        <div className="flex-col-2 flex-center">
                            <div className="arrow"></div>
                        </div>
                    </div>
                    <div className="flex-vcenter shop" onClick={this.showSmithy}>
                        <div className="icon flex-center"><div className="fonts-shop"></div></div>
                        <div className="flex-g-1">铁匠铺</div>
                        <div className="flex-col-2 flex-center">
                            <div className="arrow"></div>
                        </div>
                    </div>
                    <div className="flex-vcenter shop" onClick={this.showAlchemy}>
                        <div className="icon flex-center">
                            <div className="fonts-shop"></div>
                        </div>
                        <div className="flex-g-1">炼金所</div>
                        <div className="flex-col-2 flex-center">
                            <div className="arrow"></div>
                        </div>
                    </div>
                    <div className="flex-vcenter shop" onClick={this.showAlchemy}>
                        <div className="icon flex-center">
                            <div className="fonts-shop"></div>
                        </div>
                        <div className="flex-g-1">拍卖行</div>
                        <div className="flex-col-2 flex-center">
                            <div className="arrow"></div>
                        </div>
                    </div>
                    <div className="flex-vcenter shop" onClick={this.showAlchemy}>
                        <div className="icon flex-center">
                            <div className="fonts-shop"></div>
                        </div>
                        <div className="flex-g-1">竞技场</div>
                        <div className="flex-col-2 flex-center">
                            <div className="arrow"></div>
                        </div>
                    </div>
                </div>
                <div className="town-bottom flex-center">
                    {riskBag.items.length > 0 ?
                        <div onClick={() => this.showRiskBag()} className="flex-center riskBag">
                            <div className="fonts fonts-bag"></div>
                            <div className="lex-g-1">冒险背包</div>
                        </div> :
                        <div onClick={() => this.changeMap(4, '/map')} className="flex-vcenter go">
                            <div className="go-left"></div>
                            <div className="go-name flex-g-1">出发</div>
                            <div className="fonts-send"></div>
                        </div>
                    }
                </div>
            </div>
        )
    }
}

export default Main;